const Clutter    = imports.gi.Clutter;
const Lang       = imports.lang;
const Mx         = imports.gi.Mx;
const Octopus    = imports.gi.Octopus;
const OctopusMx  = imports.gi.OctopusMx;

const AlbumArt = imports.albumArt;

function start() {
	this.app = OctopusMx.utils_new_application ("org.octopus.Mx.Demo", 0);
	this.app.connect ('startup', Lang.bind(this, function () {
		this.win = app.create_window ("mx-demo");
		this.win.set_has_toolbar (false);
		this.win.set_window_size (250, 40);
		this.stage = win.get_clutter_stage ();
		
		window.global = Octopus.Global.get ();
		try {
			//requires mx-css file at index 0
			Mx.Style.get_default ().load_from_file (global.css_files_get (0));
		} catch (e) {
			print ("ERROR loading css file: " + e.message);
		}

		this.hBox = new Mx.BoxLayout ({ orientation: Mx.Orientation.HORIZONTAL });
		this.stage.add_child (this.hBox);
		this.albumArtStack = new Mx.Stack ();
		this.hBox.add_child (this.albumArtStack);
		this.albumArt = new AlbumArt.AlbumArt (this.albumArtStack,
											   35); //albumArtSize
		this.vBox = new Mx.BoxLayout ({ orientation: Mx.Orientation.VERTICAL });
		this.hBox.add_child (this.vBox);
		this.title = new Mx.Label ({ style_class: 'title',
									 width: 150 });
		this.vBox.add_child (this.title);
		this.artist = new Mx.Label ({ style_class: 'artist',
									  width: 150 });
		this.vBox.add_child (this.artist);
		this.duration = new Mx.Label ({ style_class: 'duration',
										width: 50 });
		this.hBox.add_child (this.duration);

		global.get_playback ().connect ('medialib_info_changed', Lang.bind (this, this.on_medialib_info_changed));
		global.get_playback ().load_playback ();

		this.stage.show();
	}));

	this.app.run (null);
};

function on_medialib_info_changed (/*Playback*/ playback_model) {
	this.albumArt.loadAlbumArt (playback_model.picture_front);
	this.title.text    = playback_model.title;
	this.duration.text = Octopus.utils_format_duration (playback_model.duration);
	this.artist.text   = playback_model.artist;
}
